<template>
  <div class="piniaStudy">
    <div class="piniaStudy_box">
      <h3>pinia的使用：</h3>
      <h4>{{ piniaStudyStore.nums }}</h4>
      <h4>{{ piniaStudyStore.myArr }}</h4>
      <el-button @click="changePiniaNums">改变nums</el-button>
      <el-button @click="changePiniaArr">改变数组</el-button>
      <el-button @click="changePiniaObj">改变对象</el-button>
    </div>
    <son1 />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { usePiniaStudyStore } from "@/stores/modules/piniaStudy";
import son1 from "./components/son1.vue";
const piniaStudyStore = usePiniaStudyStore();
console.log("piniaStudyStore", piniaStudyStore);
const changePiniaNums = () => {
  piniaStudyStore.setNums(piniaStudyStore.nums + 1);
};
const changePiniaArr = () => {
  let arr = [Math.random().toFixed(2), 3, 4, 5];
  piniaStudyStore.setMyArr(arr);
};
const changePiniaObj = () => {
  let obj = piniaStudyStore.myObj;
  obj.name = Math.random().toFixed(2);
  piniaStudyStore.setMyObj(obj);
};
</script>

<style scoped lang="scss">
.piniaStudy {
  display: flex;
  flex-wrap: wrap;
}
.piniaStudy_box {
  width: 300px;
  height: 200px;
  background: red;
}
</style>
